<script lang="ts" setup>
import { type PropType } from "vue"
import { useRouter, type RouteRecordRaw } from "vue-router"
import { isExternal } from "@/utils/validate"
import bus from '@/utils/Bus'

const router = useRouter()

const emits = defineEmits(['titleUpdate'])


const props = defineProps({

  to: {
    type: String,
    default: () => '',
  },

  item: {
    type: Object as PropType<RouteRecordRaw>,
    default: () => { }
  },
  parentTitle: {
    type: String,
    default: 'default'
  },
})



const getIcon = (item: RouteRecordRaw) => `${item?.meta?.icon || 'mdi-home'}`
const getTitle = (item: RouteRecordRaw) => `${item?.meta?.title || 'default'}`
const clickItem = (item: RouteRecordRaw) => {
  // 如果是外部连接点击失效
  if (isExternal(item?.meta?.href as string)) {
    return;
  }

  // 修改title
  emits('titleUpdate', props.parentTitle)
  // 使用消息订阅与发布实现tab栏菜单选择变化
  bus.emit('routerUpdate', item?.meta?.title)

  if (item?.children?.length as number > 1) {
    // 默认打开路由
    router.push(item.path)
  }
}

</script>

<template>
  <ItemLink :to="to">
    <v-list-item :prepend-icon="getIcon(item)" @click="clickItem(item)" :title="getTitle(item)"></v-list-item>
  </ItemLink>
</template>
<style lang="scss" scoped>

</style>

